import MenuIcon from '@material-ui/icons/Menu';
import CloseIcon from '@material-ui/icons/Close';
import './index.scss';
import { useSelector } from 'react-redux';
import { useState } from 'react';
import Logo from '../../assets/images/logo.svg';

const Header: React.FC = () => {
  const cars: string[] = useSelector(function (state: any) {
    return state.car.cars;
  });
  const [burgerStatus, setBurgerStatus] = useState(false);

  const changeBurgerStatus = () => {
    setBurgerStatus(!burgerStatus);
    const bodySelect = document.querySelector('body') as HTMLBodyElement;
    bodySelect.classList.toggle('hideScroll');
  };

  return (
    <div className="container">
      <a href="#/">
        <img src={Logo} alt="" />
      </a>
      <div className="menu">
        {cars &&
          cars.map((car, index) => (
            <a key={index} href="#car">
              {car}
            </a>
          ))}
      </div>
      <div className="right-menu">
        <a href="#shop">Shop</a>
        <a href="#account">Tesla Account</a>
        <MenuIcon onClick={changeBurgerStatus} />
      </div>
      <div className={burgerStatus ? 'show burger-nav' : 'burger-nav'}>
        <div className="close-wrapper">
          <CloseIcon onClick={changeBurgerStatus} />
        </div>
        {cars &&
          cars.map((car, index) => (
            <li key={index}>
              <a href="#/">{car}</a>
            </li>
          ))}
        <li>
          {' '}
          <a href="#/">Existing Inventory</a>{' '}
        </li>
        <li>
          {' '}
          <a href="#/">Used Inventory</a>{' '}
        </li>
        <li>
          {' '}
          <a href="#/">Trade-in</a>{' '}
        </li>
        <li>
          {' '}
          <a href="#/">Cybertruck</a>{' '}
        </li>
        <li>
          {' '}
          <a href="#/">Roadster</a>{' '}
        </li>
        <li>
          {' '}
          <a href="#/">Semi</a>{' '}
        </li>
        <li>
          {' '}
          <a href="#/">Charging</a>{' '}
        </li>
        <li>
          {' '}
          <a href="#/">Power</a>{' '}
        </li>
        <li>
          {' '}
          <a href="#/">Components</a>{' '}
        </li>
        <li>
          {' '}
          <a href="#/">Utilities</a>{' '}
        </li>
        <li>
          {' '}
          <a href="#/">Test Drive</a>{' '}
        </li>
      </div>
    </div>
  );
};

export default Header;
